/**
 * 省市县区三级选择器
 */

var PCA = Class.create();
PCA.prototype = {
    data:[],
    titles:[],
    names:[],
    selector:"#PCA",
    initialize: function (selector,srcData,titles,names) { // 构造函数
        //参数说明selector， 父容器选择器，负责点击事件监听，同时插入隐藏：1.input元素作为表单提交时使用；2.绝对定位的选择容器BOX
        //参数说明srcData，  数据格式[{id,name,sons}]，sons以数组格式嵌套，可以无限向下
        //参数说明titles,    数据格式["province","city","area"],多级选择器现实的名称和隐藏的input元素name
        //参数说明names,     数据格式["省份","城市","县区"],多级选择器现实的名称和隐藏的input元素name

        this.data = srcData;
        this.selector = selector;
        this.title = titles;
        this.names = names;
        this.vue;
        var ids = []
        names.map(function (data) {
            ids.push(0)
        })

        var data = {
            //初始化配置
            showStatus:false,
            ids_org:ids,
            titles_org:titles,
            names_org:names,

            //实际数据
            ids_real:ids,
            titles_real:titles,
            names_real:names,

            //编辑的数据
            ids:ids,
            titles:titles,
            names:names,
            curLevel:0,
            curListData:srcData,
            srcData:srcData
        }
        var cartVM = createVM(selector, data, function () {
            return {
                "init":function () {
                    this.showStatus = true;
                    // this.ids = this.ids_org.concat();
                    // this.titles = this.titles_org.concat();
                    // this.names = this.names_org.concat();
                    this.ids = [];
                    this.titles = [];
                    this.names = this.names_org.concat();
                    this.curLevel = 0;
                    this.curListData = this.srcData ;
                },

                "setInitData":function (ids_real,titles_real) {
                    this.ids_real = ids_real;
                    this.titles_real = titles_real;
                },

                "open":function () {
                    this.init();
                },
                "close":function () {
                    this.showStatus = false;
                },
                "confirm":function () {
                    if (this.ids.length > 0) {
                        this.ids_real = this.ids.slice(0);
                        this.titles_real = this.titles.slice(0);
                        this.names_real = this.names.slice(0);
                    }
                    this.showStatus = false;
                },
                "setItem":function (index) {
                    var id = this.curListData[index].id;
                    var title = this.curListData[index].name;
                    var name = this.names_org[this.curLevel];
                    this.ids[this.curLevel] = id
                    this.titles[this.curLevel] = title
                    this.names[this.curLevel] = name
                    var parentData = this.curListData[index].sons;
                    this.curLevel ++;
                    if(parentData != []){
                        //有子分类就继续向下找
                        this.curListData = parentData;
                    }
                }
            }
        });
        this.vue = cartVM;
    },
    createView:function () {
        //创建显示 省份/城市/县区

        //创建隐藏input

        //创建选择器

    },
    createTitle:function (title) {

    },
    template:function () {

    }

};







// {#************多级联动选择器*****start*********#}
// <div id="PCA" class="c11">
//     <div class="PCATitle">
//     <span @click="open" v-for="(item ,index) in titles_real"><span class="pad5" v-if="index > 0">/</span>[[ item ]]</span>
//     </div>
//     <div class="PCAInput">
//     <input v-for="( id , index ) in ids_real" type="hidden" name="province" value="" v-model="id" :name="names_real[index]">
//     </div>
//     <div class="PCABox" style="bottom: 0;left:0;width: 100%;position: fixed;z-index: 999999; background: #FFF;" v-if="showStatus">
//     <div class="PCABoxTitle pad5 bdbso flrc" style="">
//     <span v-for="(item ,index) in titles"><span class="pad5" v-if="index > 0">/</span>[[ item ]]</span>
//     <span class="flex1 fle">
//     <div class="c2" @click="confirm">确定</div>
//     <div class="c12 padl10" @click="close">取消</div>
//     </span>
//     </div>
//     <div class="PCABoxData" style="height: 100vw;overflow: scroll;">
//     <template>
//     <div class="pad5" v-for="(item,index) in curListData" @click="setItem(index)">
//     [[ item.name ]]
//     </div>
//     </template>
//     </div>
//     </div>
// </div>
// {#************多级联动选择器******end ********#}


















